<template>
    <div class="box">
        <header>
            <div class="img"><img src="img/datouxiang33@2x.png" alt=""></div>
            <div class="right">
                <h2>于海洋的添加课程审批</h2>
                <p>待处理</p>
            </div>
        </header>
        <nav>
            <div class="body">
                <div class="title">发起人</div>
                <div class="content">于海洋</div>
                <div class="title">隶属校区/部门</div>
                <div class="content">研发中心</div>
               <!-- 课程审批详情 -->
                <div class="lesson">
                    <div class="title">课程名称</div>
                    <div class="content">幼儿初级-小手大世界</div>
                    <div class="title">开通人员</div>
                    <!-- <div class="title">删除人员</div> -->
                    <div class="content">于海洋、于振动、于皓男、于建人</div>
                </div>

                <div class="title">提交时间</div>
                <div class="content">2020-01-01</div>
                <!-- 人员审批 -->
                <div class="people">
                    <div class="content" style="font-weight:bold">添加人员信息：</div>
                     <div class="title">姓名</div>
                    <div class="content">何振东</div>
                     <div class="title">手机号</div>
                    <div class="content">15698632247</div>
                     <div class="title">邮箱</div>
                    <div class="content">992085393@qq.com</div>
                     <div class="title">性别</div>
                    <div class="content">男</div>
                     <div class="title">职位</div>
                    <div class="content">研发专员</div>
                     <div class="title">部门</div>
                    <div class="content">研发中心</div>
                </div>
            </div>
            <div class="button"><button style="border-radius: 0.15rem 0 0 0.15rem;background:#2E9EFF">通过</button><button style="border-radius: 0 0.15rem 0.15rem 0;background:#FF2E2E">拒绝</button></div>
        </nav>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
    .box{
        height: 100%;
    }
    header{
        display: flex;
        align-items: center;
        padding: 0.2rem;
        .img{
            width: 0.72rem;
            height: 0.72rem;
            border-radius: 50%;
            img{
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }
        .right{
            margin-left: 0.17rem;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            h2{
                font-size: 0.3rem;
                font-family: PingFang SC;
                font-weight: bold;
                color: #343434;
            }
            p{
                font-size: 0.24rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FA742A;
            }
        }
    }
    nav{
       border: 0.2rem solid #F7F9FA;
       height: 12rem;
       display: flex;
       flex-direction: column;
        border-radius: 0.15rem;
       .body{
           padding: 0 0.2rem 0.2rem;
           box-sizing: border-box;
           background: white;
           flex: 1;
           overflow: scroll;
           .title{
                margin-top: 0.3rem;
                font-size: 0.26rem;
                color: #787878;
           }
           .content{
               margin-top: 0.15rem;
               font-size: 0.28rem;
           }
       }
       button{
           width: 50%;
           height: 0.84rem;
        //    border-radius: 0.15rem 0 0 0.15rem;
           border: none;
        font-size: 0.33rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
       }
    }
    .people{
        margin-top: 0.2rem;
        border-top: 0.01rem solid #eee;
    }
</style>